<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="no-referrer">
    <title>Document</title>
    <style>

    </style>
    <link rel="stylesheet" href="../css/shouye.css">
    <link rel="stylesheet" href="../css/tongyong.css">
</head>

<body>


    <div class="jumbotron">
        <div class="kop">
            <a href="./zhuce.html" class="btn btn-danger btn-lg" role="button">注册</a>
            <a href="JavaScript:;" name="login" class="btn btn-danger btn-lg" role="button">登录</a>
            <h1>我是一个首页</h1>
            <button name="logout" class="btn btn-danger btn-lg" role="button">退出登录</button>
            <button name="cart" class="btn btn-danger btn-lg" role="button">购物车</button>


        </div>

        <!-- js方法携带参数 -->
        <div class="oop">
            <div class="hop">
                <p><a name="1" class="btn btn-primary btn-lg" href="JavaScript:;" role="button">食品酒水</a></p>
                <p><a name="1" class="btn btn-primary btn-lg" href="JavaScript:;" role="button">童装玩具</a></p>
                <p><a name="1" class="btn btn-primary btn-lg" href="JavaScript:;" role="button">家装建材</a></p>
                <p><a name="1" class="btn btn-primary btn-lg" href="JavaScript:;" role="button">奶粉尿裤</a></p>
                <p><a name="1" class="btn btn-primary btn-lg" href="JavaScript:;" role="button">其他</a></p>
                <!-- html方法携带参数
        <p><a name="1" class="btn btn-primary btn-lg" href="./list.html?cat_one_id=其他" role="button">其他</a></p> -->
            </div>
            <div class="banner">
                <ul class="clear"></ul>
                <ol></ol>
                <div>
                    <a href="JavaScript:;" name="left">&lt;</a>
                    <a href="JavaScript:;" name="right">&gt;</a>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/myAjax.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/banner.js"></script>
    <script src="../js/cookie.js"></script>
    <script>
        //轮播图
        const imgArr = [{
            id: 1,
            size: '73.2KB',
            width: 1080,
            height: 608,
            name: '1.jpg'
        }, {
            id: 2,
            size: '70.2KB',
            width: 1080,
            height: 608,
            name: '2.jpg'
        }, {
            id: 3,
            size: '105KB',
            width: 1080,
            height: 608,
            name: '3.jpg'
        }, {
            id: 4,
            size: '87.7KB',
            width: 1080,
            height: 608,
            name: '4.jpg'
        }, {
            id: 5,
            size: '317KB',
            width: 1080,
            height: 608,
            name: '5.jpg'
        }, ];
        //获取标签对象
        const oBanner = document.querySelector('.banner')
            // 面向对象编程
            // 调用构造函数 创建 轮播图 实例化对象
        const bannerObj = new setBanner(oBanner, imgArr);
        console.log(bannerObj);
        bannerObj.init();
    </script>
    <script>
        //点击登录，跳转页面
        $('[name="login"]').click(function() {
                //跳转登录页面，同时携带当前页面的url地址
                window.location.href = `./denglu.html?url=${window.location.href}`
            })
            //退出登录
        $('[name="logout"]').click(function() {
            //先获取coolie 对象
            const cookieObj = myGetCookie();
            //判断是否已经登录
            if (cookieObj.login === '1') {
                //证明已经登录
                //cookieObj的里面的login的值等于1，证明已经登录
                //设定login存储的数值是0
                mySetCookie('login', 0, 7 * 24 * 60 * 60, '/');
                //可以设定login的实效是负数，直接就是实效过期，浏览器自动删除这个cookie
                mySetCookie('login', 0, -1, '/');
                window.alert('你已经退出登录')
            } else {
                //还没有登录

                window.alert('您还没有登录,请您先登录');


            }
        });
    </script>
    <script>
        // 点击商品分类跳转列表页面
        // 跳转商品列表页面同时携带商品分类
        // 点击标签跳转列表，携带参数
        // 健名cat_one_id键值是标签内容，一级分类
        $('[name="1"]').click(function() {
                window.location.href = `./liebiao.html?cat_one_id=${$(this).html()}`;
            })
            //点击购物车，跳转购物车页面
        $('[name="cart"]').click(function() {
            const cookieObj = myGetCookie();
            if (cookieObj.login === '1') {
                //已经登录，直接跳转购物车
                window.location.href = './gouwuche.html'
            } else {
                if (window.confirm('你还没有登录账号，点击确认跳转登录页面')) {
                    window.location.href = './denglu.html'
                }
            }
        })
    </script>
</body>

</html>